// 游客列表 四级路由
import { useEffect } from "react";
import { ProTable } from "@ant-design/pro-components";
import { useDispatch, useSelector } from "react-redux";
import { tListSet } from '../../../../../store/reducer/touristlist';
import request from "../../../../../http/request";

export default () => {
  // const [list, setList] = useState([]);
  // console.log(list);

  const dis = useDispatch()
  useEffect(() => {
    request.get("/api/touristlist").then((res) => {
      console.log(res.list);
      // setList(res.list);
      dis(tListSet(res.list));
    });
  }, []);
  const list = useSelector((state) => {
    return state.touristlist.tList

  })
  console.log(list);

  const valueEnum = {
    0: "close",
    1: "online",
  };

  const tableListDataSource = [];


  list?.forEach((item, index) => {
    for (let i = 1; i < 3; i += 1) {
      return tableListDataSource.push({
        key: item.key,
        id: item.id,
        name: item.name,
        img: item.img,
        // img: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
        // status: valueEnum[item.status],
        status: valueEnum[item.status],
        ip: item.ip,
        time: item.time,
      });
    }
  });



  const columns = [
    {
      title: "ID",
      width: 80,
      dataIndex: "key1",
      render: (_) => <a>{_}</a>,
    },
    {
      title: "游客id",
      width: 80,
      dataIndex: "id",
      render: (_) => <a>{_}</a>,
    },
    {
      title: "游客名称",
      width: 80,
      dataIndex: "name",
      render: (_) => <a>{_}</a>,
    },
    {
      title: "游客头像",
      width: 80,
      dataIndex: "img",
      valueType: "image",
      render: (_) => <a>{_}</a>,
    },
    {
      title: "在线状态",
      width: 80,
      dataIndex: "status",
      initialValue: "close",
      valueEnum: {
        close: { text: "离线", status: "Default" },
        online: { text: "上线", status: "Success" },
      },
    },
    {
      title: "IP",
      width: 80,
      dataIndex: "ip",
      render: (_) => <a>{_}</a>,
    },
    {
      title: "创建时间",
      width: 140,
      dataIndex: "time",
      render: (_) => <a>{_}</a>,
    },
  ];

  return (
    <div>
      <ProTable
        dataSource={tableListDataSource}
        rowKey="key"
        pagination={{
          showQuickJumper: true,
        }}
        columns={columns}
        search={false}
        dateFormatter="string"
      />
    </div>
  );
};
